<template>
    <div class="organization-detail">
        <vxe-form
            ref="formRef"
            border
            title-background
            title-align="left"
            title-width="110"
            title-overflow
            :data="companyInfoManagerStore.currentOrgData">

            <vxe-form-item title="机构编号"
                           field="orgId"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构在系统中的唯一编号', icon: 'vxe-icon-num-list' }">
                <template #default="{ data }">
                    <span v-if="!companyInfoManagerStore.isCurrentOrgEditing">
                        {{ data.orgId }}
                    </span>
                    <vxe-input v-else
                               v-model="data.orgId"
                               placeholder="请输入机构编号"
                               disabled>
                    </vxe-input>
                </template>
            </vxe-form-item>

            <vxe-form-item title="机构简称"
                           field="orgSimpleName"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构简称', icon: 'vxe-icon-company' }">
                <template #default="{ data }">
                    <span v-if="!companyInfoManagerStore.isCurrentOrgEditing">
                        {{ data.orgSimpleName }}
                    </span>
                    <vxe-input v-else v-model="data.orgSimpleName" placeholder="请输入机构简称"/>
                </template>
            </vxe-form-item>

            <vxe-form-item title="机构全称"
                           field="orgName"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构全称', icon: 'vxe-icon-chart-bar-x' }">
                <template #default="{ data }">
                    <span v-if="!companyInfoManagerStore.isCurrentOrgEditing">
                        {{ data.orgName }}
                    </span>
                    <vxe-input v-else v-model="data.orgName" placeholder="请输入组织名称"/>
                </template>
            </vxe-form-item>

            <vxe-form-item title="联系电话"
                           field="phone"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构联系电话', icon: 'vxe-icon-pc' }">
                <template #default="{ data }">
                    <span v-if="!companyInfoManagerStore.isCurrentOrgEditing">
                        {{ data.phone }}
                    </span>
                    <vxe-input v-else v-model="data.phone" placeholder="请输入联系电话"/>
                </template>
            </vxe-form-item>

            <vxe-form-item title="联系邮箱"
                           field="email"
                           span="12"
                           :item-render="{}"
                           :title-prefix="{ content: '机构联系邮箱', icon: 'vxe-icon-envelope' }">
                <template #default="{ data }">
                    <span v-if="!companyInfoManagerStore.isCurrentOrgEditing">
                        {{ data.email }}
                    </span>
                    <vxe-input v-else v-model="data.email" placeholder="请输入联系邮箱"/>
                </template>
            </vxe-form-item>

            <vxe-form-item title="创建时间"
                           field="createTime"
                           span="12"
                           :title-prefix="{ content: '机构的创建时间', icon: 'vxe-icon-time' }">
                <template #default="{ data }">
                    {{ data.createTime }}
                </template>
            </vxe-form-item>

            <vxe-form-item title="更新时间"
                           field="updateTime"
                           span="12"
                           :title-prefix="{ content: '机构的更新时间', icon: 'vxe-icon-time' }">
                <template #default="{ data }">
                    {{ data.updateTime }}
                </template>
            </vxe-form-item>

            <vxe-form-item align="right" span="24">
                <template #default="{ data }">
                    <vxe-button v-if="!companyInfoManagerStore.isCurrentOrgEditing"
                                status="primary"
                                icon="vxe-icon-edit"
                                @click="startEdit"
                                content="编辑"/>

                    <template v-else>
                        <vxe-button
                            style="margin-left: 10px;"
                            @click="cancelEdit"
                            icon="vxe-icon-undo"
                            content="取消"/>

                        <vxe-button
                            status="primary"
                            icon="vxe-icon-save"
                            @click="submitForm(data)"
                            content="保存"/>
                    </template>
                </template>
            </vxe-form-item>
        </vxe-form>
    </div>
</template>

<script setup lang="ts">
import { useCompanyInfoManagerStore } from "@/store/UseCompanyInfoManagerSotre.ts";
import { OrganizationInfoVO } from "@/entiy/vo/OrganizationInfoVO.ts";
import MessageUtils from "@/utils/MessageUtils.ts";

const companyInfoManagerStore = useCompanyInfoManagerStore();

// 开始编辑事件
const startEdit = () => {
    companyInfoManagerStore.isCurrentOrgEditing = true;
}

// 取消编辑事件
const cancelEdit = () => {
    companyInfoManagerStore.isCurrentOrgEditing = false;
}

// 提交事件
const submitForm = (data: OrganizationInfoVO) => {
    companyInfoManagerStore.isCurrentOrgEditing = false;
    companyInfoManagerStore.isPageLoading = true;

    companyInfoManagerStore.updateOrgInfo(data).catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    }).finally(() => {
        companyInfoManagerStore.isPageLoading = false;
    });
}
</script>